﻿<template>
  <div>
    <div class="box-header box" style="position:relative;" v-loading.fullscreen.lock="loading">
      <div class="successLogo" />
      <div>
        <el-page-header
          :title="$t('common.back')"
          style="margin-bottom:20px"
          :content="$t('modules.invoice.invoice_detail')"
          @back="back"
        />
      </div>
      <el-card style="width:90%;margin:auto">
        <div style="float:left;font-size: 16px;font-weight: 400;margin-bottom:20px">
          <div class="newlandLogo" />
          <div class="tomsLogo" />
          <div style="margin:40px 10px;">{{$t('modules.invoice.dear',{name:invoiceDetail.customerName})}}</div>
          <div style="width:100%;margin:0px 10px;">{{$t('modules.invoice.detail_content')}}</div>
          <div style="margin:30px 10px 0px 10px">{{$t('modules.invoice.detail_regard')}}</div>
          <div style="margin:0px 10px;padding-bottom:60px">{{$t('modules.invoice.detail_end')}}</div>
        </div>
      </el-card>
      <el-card style="width:90%;margin:auto">
        <div>
          <div style="margin:20px 10px;float: left;">
            <div class="billDetail">
              <div class="billDetailTitle">{{$t('modules.invoice.payment_person')}}:</div>
              <span class="billDetailContent">{{ invoiceDetail.customerName }}</span>
            </div>
            <div class="billDetail">
              <div class="billDetailTitle">{{$t('modules.invoice.payment_date')}}:</div>
              <span class="billDetailContent">{{ invoiceDetail.paymentTime }}</span>
            </div>
            <!-- <div class="billDetail">
              <div class="billDetailTitle">{{$t('modules.invoice.verify_person')}}:</div>
              <span class="billDetailContent">{{ invoiceDetail.verifyPerson }}</span>
            </div>
            <div class="billDetail">
              <div class="billDetailTitle">{{$t('modules.invoice.verify_date')}}:</div>
              <span class="billDetailContent">{{ invoiceDetail.verifyTime }}</span>
            </div> -->
            <div class="billDetail" v-if="invoiceDetail.remark===null||invoiceDetail.remark===''">
              <div class="billDetailTitle">{{$t('modules.invoice.remark')}}:</div>
              <span style="font-weight: 500;">{{ invoiceDetail.remark }}</span>
            </div>
          </div>
          <div style="width:300px;margin:0px 20px;float:right">
            <div style="float:left">
                <div style="font-weight:800;">
                  <div style="font-size:20px;margin-top: 10px;">{{$t('modules.invoice.amount')}}</div>
                  <div style="font-size:40px;">{{ billAmount }}</div>
                </div>
              <!-- <div style="float:left">
                <div style="font-size:13px;color:#9ea9b4;margin-top:30px">{{$t('common.status')}}</div>
                <div><el-tag style="margin:0px auto" type="success" size="small">{{$t('modules.invoice.success')}}</el-tag></div>
              </div> -->
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="width:90%;margin:auto;border-top: 0px;">
        <!-- 账单详情 -->
        <div>
          <table class="invoiceDetail">
            <caption style="margin-bottom:20px;text-align:left;">{{$t('modules.invoice.statement_detail')}}</caption>
            <tr>
              <th style="text-align:left;">{{$t('modules.invoice.plat')}}</th>
              <th style="text-align:left;">{{$t('modules.invoice.billing_method')}}</th>
              <th style="text-align:left;">{{$t('modules.invoice.billing_date')}}</th>
              <th style="text-align:right;">{{$t('modules.invoice.usage')}}</th>
              <th style="text-align:right;">{{$t('modules.invoice.free_count')}}</th>
              <th style="text-align:right;">{{$t('modules.invoice.price')}}</th>
            </tr>
            <tr v-for="Item in statementData" :key="Item.index">
              <td style="text-align:left;">{{$t('contract_plat.'+Item.platCode)}}</td>
              <td style="text-align:left;">{{$t('contract_statistic.'+Item.statisticMethodCode)}}</td>
              <td style="text-align:left;" v-if="!Item.sameDate&&Item.isSame">{{$t('modules.invoice.month_option['+Item.startTime+'].label')}}~{{$t('modules.invoice.month_option['+Item.endTime+'].label')}},{{Item.startYear}}</td>
              <td style="text-align:left;" v-if="!Item.sameDate&&!Item.isSame">{{$t('modules.invoice.month_option['+Item.startTime+'].label')}},{{Item.startYear}}~{{$t('modules.invoice.month_option['+Item.endTime+'].label')}},{{Item.endYear}}</td>
              <td style="text-align:left;" v-if="Item.sameDate">{{$t('modules.invoice.month_option['+Item.startTime+'].label')}},{{Item.startYear}}</td>
              <td style="text-align:right;">{{Item.statisticCount}}</td>
              <td style="text-align:right;">{{Item.contractFreeCount}}</td>
              <td style="text-align:right;">{{Item.totalAmount}}</td>
            </tr>
          </table>
        </div>
        <div>
          <div style="font-weight:600;font-size:18px;margin:40px 0px 0px 10px;">{{$t('modules.invoice.note')}}</div>
          <div style="display:inline-block;font-size:16px;color:#9ea9b4;margin-left:10px">{{$t('modules.invoice.message')}}</div>
          <!-- <el-button size="small" type="primary" style="float:right" @click="back">Confirm</el-button> -->
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>

import { getInvoiceDetail } from '@/api/invoice'
import { toTime,toThousands } from '@/utils/index'
export default {
  components: {

  },
  data() {
    return {
      loading:false,
      invoiceDetail: {},
      statementData:[],
    }
  },
  computed:{
    billAmount(){
      return '$'+this.invoiceDetail.billAmount
    }
  },
  mounted() {
    this.getInvoiceDetails()
  },
  methods: {
    // 返回
    back() {
      this.$router.back()
    },
    getInvoiceDetails() {
      this.loading = true
      getInvoiceDetail(this.$route.query.invoiceId).then((res) => {
        this.statementData = res.statementsMergeEntityList
        for(let i=0 ; i<this.statementData.length;i++){
          if(this.statementData[i].startTime!==this.statementData[i].endTime){
            this.statementData[i]['sameDate'] = false
            let start = this.statementData[i].startTime.slice(0,4)
            let end = this.statementData[i].endTime.slice(0,4)
            if(start === end){ //同年
              this.statementData[i]['isSame'] = true
              this.statementData[i].startYear = Number(this.statementData[i].startTime.slice(0,4))
            }else{ //不同年
              this.statementData[i]['isSame'] = false
              this.statementData[i].startYear = Number(this.statementData[i].startTime.slice(0,4))
              this.statementData[i].endYear = Number(this.statementData[i].endTime.slice(0,4))
            }
            this.statementData[i].startTime = Number(this.statementData[i].startTime.slice(4,6))
            this.statementData[i].endTime = Number(this.statementData[i].endTime.slice(4,6))
          }else{ //同年同月
            this.statementData[i]['sameDate'] = true
            this.statementData[i].startYear = Number(this.statementData[i].startTime.slice(0,4))
            this.statementData[i].startTime = Number(this.statementData[i].startTime.slice(4,6))
          }
        }
        this.invoiceDetail = res
        this.invoiceDetail.creTime = toTime(parseInt(res.creTime))
        this.invoiceDetail.verifyTime = toTime(parseInt(res.verifyTime))
        this.invoiceDetail.paymentTime = toTime(parseInt(res.paymentTime))
        this.invoiceDetail.billAmount = toThousands(res.billAmount)
        this.loading = false
      }).catch((err) => {
        this.$message.error(err.message)
        this.loading = false
      })
    }
  }
}
</script>

      <style scoped lang="scss">
      .box {
        margin: 0.2em 0.5em;
      }
      .box-header {
        font-weight: bold;
        font-size: 18PX;
        color: #12263f;
      }
      .newlandLogo{
          display:inline-block;
          width:300px;
          height:60px;
          margin:15px;
          background:url('~@/assets/images/flycare/newland-logo111.png');
          background-size: cover;
      }
      .tomsLogo{
          display:inline-block;
          width:200px;
          height:62px;
          margin:15px 15px 15px 30px;
          background:url('~@/assets/images/flycare/toms-logo.png');
          background-size: cover;
      }
      .successLogo{
          display:inline-block;
          width:250px;
          height:250px;
          margin:15px 15px 15px 30px;
          opacity: 0.9;
          background:url('~@/assets/images/flycare/pay-success-logo.png');
          background-size: cover;
          position:absolute;
          bottom: 38%;
          right: 9%;
      }
      .billDetail{
          font-size:16px;
          margin-bottom:15px;
      }
      .billDetailTitle{
          display:inline-block;
          width:180px;
          color:#9ea9b4;
          font-weight:400;
      }
      .billDetailContent{
          font-weight:400
      }

      .invoiceDetail{
      width:98%;
      margin:10px auto;
      th,td {
        text-align:center;
        height:50px;
        border-bottom:solid 1px #eaeaea;
      }
      th{
        border-top:solid 1px #eaeaea;
        font-size: 16px;
        font-weight:700;
      }
      td{
        font-size: 16px;
        font-weight:400;
      }
    }
      </style>

